<template>
  <div id="fenxi_zhangdan">
    <van-nav-bar
      title="支出统计"
      left-text="返回"
      left-arrow
      @click-left="$router.push('/fenxi')"
    />
    <van-notice-bar left-icon="volume-o" text="" />
    <van-tabs
      style="text-align: center"
      type="card"
      @rendered="rendered"
      v-model="tabSelect"
    >
      <van-tab name="nian_fenxi" title="年">
        <nianzhangdan :xuanran="xuanran_nian" />
      </van-tab>
      <van-tab name="yue_fenxi" title="月">
        <yuezhangdan :xuanran="xuanran_yue" />
      </van-tab>
      <van-tab name="ri_fenxi" title="日">
        <rizhangdan :xuanran="xuanran_ri" />
      </van-tab>
      <van-tab name="leiji_fenxi" title="累计">
        <leijizhangdan :xuanran="xuanran_leiji" />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import NianZhangDan from "./FenXi_ZhangDan_Nian";
import YueZhangDan from "./FenXi_ZhangDan_Yue";
import RiZhangDan from "./FenXi_ZhangDan_Ri";
import LeiJiZhangDan from "./FenXi_ZhangDan_LeiJi";

export default {
  name: "FenXi_ZhangDan",
  components: {
    nianzhangdan: NianZhangDan,
    yuezhangdan: YueZhangDan,
    rizhangdan: RiZhangDan,
    leijizhangdan:LeiJiZhangDan
  },
  data() {
    return {
      xuanran_nian: false,
      xuanran_yue: false,
      xuanran_ri: false,
      xuanran_leiji: false,
      tabSelect: "yue_fenxi",
      data: {
        jinyinianTotalMoney: 12345.52,
        jinyiyueTotalMoney: 12345.52,
        totalMoney: 12345.52,
      },
      nian_fenxi_data: [],
      yue_fenxi_data: [],
    };
  },
  methods: {
    rendered(name, title) {
      switch (name) {
        case "nian_fenxi":
          this.xuanran_nian = true;
          break;
        case "yue_fenxi":
          this.xuanran_yue = true;
          break;
        case "ri_fenxi":
          this.xuanran_ri = true;
          break;
        case "leiji_fenxi":
          this.xuanran_leiji = true;
          break;
      }
    },
  },
};
</script>
<style lang="stylus" scoped>
#fenxi_zhangdan {
}
</style>
